<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=h, initial-scale=1.0"/>
  <title>自己实现mustache</title>
</head>
<body>
<div id="app"></div>

<script src="/xuni/bundle.js"></script>
<script>
    // 模板字符串
    var templateStr = `
            <div>
                <ul>
                    {{#students}}
                    <li class="myli">
                        学生{{name}}的爱好是
                        <ol>
                            {{#hobbies}}
                            <li>{{.}}</li>
                            {{/hobbies}}
                        </ol>
                    </li>
                    {{/students}}
                </ul>
            </div>
        `;

    // 数据
    var data = {
        students: [
            {'name': '小明', 'hobbies': ['编程', '游泳']},
            {'name': '小红', 'hobbies': ['看书', '弹琴', '画画']},
            {'name': '小强', 'hobbies': ['锻炼']}
        ]
    };
    // 调用渲染
    var domStr = TemplateEngine.render(templateStr, data);
    // console.log("-> domStr", domStr);

    // 渲染上树
    var app = document.querySelector("#app");
    app.innerHTML = domStr;
</script>
</body>
<script>
</script>
</html>
